<template>
	<div class="type-list">
		<div class="action-btn">
			<Button size="small" @click="showModal(0)" type="success">添加分类</Button>
		</div>
		<Table border height="650" ref="tableList" row-key="id" :columns="tableColumn" :data="dataList" :loading="dataLoading">
			<template #sort="{row}">
				<InputNumber v-model="row.sort" size="small" :min="0" @on-change="sortDetail(row.id,$event)" />
			</template>
			<template #action="{ row }">
				<Button type="success" size="small" style="margin-right: 5px;float:left" @click="showModal(row.id)">子分类</Button>
				<Button type="warning" size="small" style="margin-right: 5px;float:left" @click="showEdit(row.id)">修改</Button>
				<Button type="error" size="small" @click="removeDetail(row.id)">删除</Button>
			</template>
		</Table>
		<!-- 需要全屏时添加这句 :mask="false" class-name="idw100" -->
		<Drawer :closable="false" :mask-closable="false" :scrollable="true" title="分类管理" width="640" v-model="showModalStatus">
			<Spin size="large" fix v-if="loading"></Spin>
			<Form :label-width="80" :model="detailInfo" ref="detailValidate" :rules="detailValidate" action="javascript:void(0)">
				<FormItem label="分类名称" prop="name">
					<Input v-model="detailInfo.name" placeholder="输入分类名称"></Input>
				</FormItem>
				<FormItem label="排序">
					<InputNumber :max="9999" :min="0" v-model="detailInfo.sort"></InputNumber>
				</FormItem>
				<FormItem>
					<Button style="margin-right: 8px" @click="showModalStatus = false">取消</Button>
					<Button type="primary" @click="handleSubmit('detailValidate')">提交</Button>
				</FormItem>
			</Form>
		</Drawer>
	</div>
</template>

<script>
export default {
	name: 'TypeList',
	data() {
		return {
			loading: true,
			dataLoading: true,
			tableColumn: [
				{
					title: 'Id',
					key: 'id',
					width: 60,
				},
				{
					title: '名称',
					minWidth: 300,
					key: 'name',
					tree: true,
				},
				{
					title: '排序',
					width: 100,
					slot: 'sort',
				},
				{
					title: '操作',
					key: 'action',
					width: 200,
					align: 'left',
					slot:"action",
				}
			],
			dataList: [],
			detailId: 0,
			detailInfo: {
				parentId: 0,
				name: '',
				sort: 0
			},
			showModalStatus: false,
			detailValidate: {
				name: [
					{ required: true, message: '名称必须填写', trigger: 'blur' }
				]
			}
		}
	},
	// 计算
	computed: {
	},
	// 监听
	watch: {
	},
	created: function() {
		this.getTableList();
	},
	methods: {
		getTableList() {
			this.$api.type.list().then(res => {
                this.dataList = res.result;
			}).finally(e=>{
				this.dataLoading = false;
            });
		},
		showModal(parentId) {
			this.showModalStatus = !this.showModalStatus;
			this.detailId = 0;
			this.detailInfo = {
				parentId: 0,
				name: '',
				sort: 0
			};
			this.detailInfo.parentId = parentId;
			this.loading = false;
		},
		handleSubmit(name) {
			this.$refs[name].validate((valid) => {
				if (valid) {
					this.loading = true;
					// 判断是添加还是修改
					if (this.detailId == 0) {
						this.$api.type.create({ parentId: this.detailInfo.parentId, name: this.detailInfo.name, sort: this.detailInfo.sort }).then(res => {
                            this.detailInfo.parentId = 0;
                            this.detailId = 0;
                            this.getTableList();
                        }).finally(res => {
                            this.showModalStatus = !this.showModalStatus;
							this.loading = false;
						});
					} else {
						this.$api.type.update({ id: this.detailId, name: this.detailInfo.name, sort: this.detailInfo.sort }).then(res => {
                            this.detailInfo.parentId = 0;
                            this.detailId = 0;
                            this.getTableList();
						}).finally(res => {
                            this.showModalStatus = !this.showModalStatus;
							this.loading = false;
						});
					}
				} else {
					this.$Message.error('请检查输入的信息是否正确！');
					this.loading = false;
				}
			})
		},
		showEdit(id) {
			this.loading = true;
			this.$api.type.detail({ detailId: id }).then(res => {
                this.detailInfo = res.result;
                this.detailId = res.result.id;
			}).finally(e=>{
                this.showModalStatus = !this.showModalStatus;
				this.loading = false;
            });
		},
		removeDetail(id) {
			this.$Modal.confirm({
				title: '警告',
				content: '<p>此操作不可恢复，三思而后行</p>',
				onOk: () => {
					this.$api.type.remove({ detailId: id }).then(res => {
                        this.getTableList();
					});
				}
			});
		},
		sortDetail(id, sort) {
			this.$api.type.sort({ id: id, sort: sort }).then(res => {
                this.getTableList();
			});
		}
	}
}
</script>
